<!-- 我的团队主页 -->
<!-- 团队主页------------------- -->
<template>
	<view>
		<image v-if="!teamInfo._id" src="/static/u3462.svg" mode=""></image>
		<view v-else class="institution-container">
			<!-- 团队头部信息 -->
			<view class="header">
				<image class="institution-icon" :src="teamInfo.teamId.avatar">
				</image>
				<view class="info-wrap">
					<navigator url="">
						<view class="name">
							{{teamInfo.teamId.name }}
						</view>
					</navigator>
					<!-- 	<navigator url="/homepackge/pages/organizations/organizations"> -->
					<view class="address">
						所属机构：{{teamInfo.organizationId.name}}
					</view>
					<!-- 		</navigator> -->
					<view class="number">
						签约人数：<span style="color: #2984F8;">{{teamInfo.doctorId?.signNumber}}</span>
					</view>

					<view class="contact">
						<rate-star :rating="teamInfo.teamId.rate"></rate-star>
					</view>
				</view>
			</view>
			<!-- 	<view class="cardone-middle">
				<text class="service-tag" style="background-color: #3DD4A733;color: #3DD4A7;">慢病管理</text>
				<text class="service-tag" style="background-color: #6c76F433;color: #6c76F4;">中医服务</text>
				<text class="service-tag" style="background-color: #FA746B33;color: #FA746B;">老年人管理</text>
			</view> -->
			<!-- 我的团队主页---------------------- -->
			<view>
				<view class="section-title">团队医生</view>

				<view class="team-list" @click="toDocotodetail">
					<view class="section-card">
						<!-- 团队长 -->
						<view class="team-item">
							<view class="avatar-wrap">
								<image class="doctor-icon" :src="teamInfo.doctorId.avatar"></image>
							</view>
							<view class="doctor-info">
								<view class="doctor-name">
									{{teamInfo.doctorId.name}}
								</view>
								<view class="doctor-detail">
									<text class="doctor-sign">签约人数：{{teamInfo.doctorId.signNumber}}</text>
								</view>
								<view class="contact">
									<rate-star :rating="teamInfo.doctorId.rate"></rate-star>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		useUserStore
	} from "../../../store/user";
	import {
		useContractStore
	} from "../../../store/contract";
	import {
		storeToRefs
	} from 'pinia';
	import {
		getSignsSearchApi
	} from "../../../api/mine-doctorTeam";
	// 获取用户状态机
	const userStore = useUserStore();
	//获取签约状态机
	const contractStore = useContractStore();
	//团队信息
	const teamInfo = ref({})
	//如果没有用户信息，先去获取用户信息
	// async
	onMounted(() => {
		if (contractStore.contractDetail) {
			teamInfo.value = {
				...contractStore.contractDetail,
			};
		}
	});
	//点击跳转到医生主页
	// function toDocotodetail() {
	// 	uni.navigateTo({
	// 		url: `/minepackge/pages/mine-doctorshomepage/mine-doctorshomepage?
	// 		doctorId=${teamInfo.value.doctorId._id}
	// 		&organizationId=${teamInfo.value.organizationId._id}&teamId=${teamInfo.value.teamId._id}`
	// 	})
	// }
	// 区别在哪儿----------
	function toDocotodetail() {
		uni.navigateTo({
			url: `/minepackge/pages/mine-doctorshomepage/mine-doctorshomepage?doctorId=${teamInfo.value.doctorId._id}&organizationId=${teamInfo.value.organizationId._id}&teamId=${teamInfo.value.teamId._id}`
		})
	}
</script>
<style scoped>
	/* 整体容器 */
	.institution-container {
		padding: 30rpx;
		background-color: #fff;
	}

	.header {
		display: flex;
		margin-bottom: 30rpx;
	}

	.institution-icon {
		width: 240rpx;
		height: 240rpx;
		margin-right: 24rpx;
		border-radius: 16rpx;
		border: 1px solid #E6F2FF;
	}

	.info-wrap {
		flex: 1;
	}

	.name {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.address {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #999999;
		line-height: 54rpx;
		margin-bottom: 16rpx;
	}

	.number {
		font-size: 24rpx;
		color: #999999;
		line-height: 54rpx;
		margin-bottom: 16rpx;
	}


	.contact {
		display: flex;
		gap: 16rpx;
	}

	/* 标签 */
	.cardone-middle {
		display: flex;
		gap: 16rpx;
		padding: 20rpx 0;
	}

	.service-tag {
		padding: 12rpx 0;
		border-radius: 8rpx;
		/* 		color: #fff; */
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	/* 医生团队样式 */
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.section-card {
		margin: 20rpx 0;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx 0;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.team-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		position: relative;
	}

	.avatar-wrap {
		position: relative;
		margin-right: 24rpx;
		width: 96rpx;
		height: 96rpx;
	}

	.doctor-icon {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		border: 2rpx solid #eee;
	}



	.doctor-info {
		flex: 1;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
		display: flex;
		align-items: center;
	}

	.doctor-type {
		font-size: 24rpx;
		color: #999;
		margin-left: 16rpx;
		padding-left: 16rpx;
	}

	.doctor-sign {
		font-size: 24rpx;
		color: #999;
	}
</style>